<template>
    上传文件

    <a-form ref="formRef" :rules="rules" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="文件归属" name="fileOwnership">
            <a-select v-model:value="formState.fileOwnership" placeholder="请选择">
                <a-select-option value="yrzj">一日之计</a-select-option>
                <a-select-option value="knoTree">在线笔记</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="版本号" name="version">
            <a-input v-model:value="formState.version" />
        </a-form-item>
        
        <a-form-item label="文件" name="file">
            <a-upload  :file-list="formState.file" :remove="handleRemove" :before-upload="beforeUpload">
                <a-button>
                    <upload-outlined></upload-outlined>
                    选择文件
                </a-button>
            </a-upload>
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">上传</a-button>
        </a-form-item>
  </a-form>


  <div>
    <a-table bordered :data-source="dataSource" :columns="columns">
        <template #operation="{ record }">
        <a-popconfirm
            v-if="dataSource.length"
            title="Sure to delete?"
            @confirm="onDelete(record)"
        >
            <a>Delete</a>
        </a-popconfirm>
        </template>
  </a-table>
  </div>
  
</template>

<script setup lang="ts">
import {  reactive, toRaw, ref,onMounted} from 'vue';
import { UploadOutlined } from '@ant-design/icons-vue';

import {
  getAppVersionListApi,
  uploadAppPackageApi,
  deleteAppPackageApi
} from '@/api/handleAppVersion.js';

const columns = reactive([
    {
        title: '文件归属',
        dataIndex: 'fileOwnership',
        // width: '30%',
    },
    
    {
        title: '文件名',
        dataIndex: 'fileName',
    },
    {
        title: '版本号',
        dataIndex: 'version',
    },
    {
      title: '远程路径',
      dataIndex: 'remotePath',
    },
    {
        title: '是否废弃',
        dataIndex: 'isAbandon',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        slots: { customRender: 'operation' },
    },
]);

const dataSource = ref([
    {
        key: '',
        fileOwnership: '',
        fileName: '',
        version: '',
        isAbandon: '',
        remotePath:''
    },
]);
const formRef = ref();
const rules = reactive({
    fileOwnership: [
        { required: true, message: '请选择', trigger: 'blur' },
    ],
    version: [
        { required: true, message: '请填写信息', trigger: 'blur' }
    ],
    file: [{ required: true, message: '请选择', trigger: 'change' }],
})

const formState = reactive({
    version: '',
    fileOwnership: '',
    file: [],
});

const  labelCol = reactive( { span: 4 })
const  wrapperCol = reactive( { span: 14 })


onMounted(async() => {
  await searchHistoryAppVersionList()
});

const searchHistoryAppVersionList = async() => {
  let res = await getAppVersionListApi('')
  dataSource.value = res?.map((item) => ({
    key: item.id.toString(),
    fileOwnership: item.fileOwnership,
    fileName: item.fileName,
    version: item.version,
    remotePath: item.filePath,
    isAbandon: item.isAbandon ? '是' : '否',
  }));
}

const onDelete = async ({key,remotePath}) => {
  let res = await deleteAppPackageApi({id:key,remotePath});
  if(res){
    // 重新调用查询接口
    await searchHistoryAppVersionList()
    alert('删除成功')
  }else {
    alert('删除失败')
  }
};

const onSubmit = () => {
    // 提交前进行表单校验
    formRef.value.validate().then(async () => {
        console.log('values', formState, toRaw(formState));

        const formData = new FormData();
        formData.append('file', formState.file[0]);
        formData.append('version', formState.version);
        formData.append('fileOwnership', formState.fileOwnership);
        
        await uploadAppPackageApi(formData).then((res) => {
            if(res){
                console.log('上传成功', res);
                alert('上传成功')
            }
        }).catch((err) => {
            console.log('上传失败', err);
            alert('上传失败')
        });
    })
};


const handleRemove = () => {
    formState.file = [];
};

const beforeUpload = (file) => {
    formState.file = [file];
    return false;
};



</script>

<style lang="less" scoped>

</style>